<template>
  <tm-app>
    <tm-navbar color="orange" title="订单详情" linear="right"></tm-navbar>
    <tm-sheet style="padding: 10px">
      <tm-card title="提货人联系方式" :margin="[0, 1, 0, 0]">
        <template v-slot:content>
          人员：
          <input placeholder="请输入提货人人员" v-model.lazy="Name" :inputPadding="[280, 10]" />
          <hr />
          电话：
          <input placeholder="请输入提货人电话" v-model.lazy="Tel" :inputPadding="[280, 10]" type="number" />
          提货地点：
          <input placeholder="请输入提货地点" v-model.lazy="Address" :inputPadding="[280, 10]" type="number" />
        </template>
      </tm-card>
    </tm-sheet>
    <tm-sheet style="padding: 10px">
      <tm-card title="选购商品" :margin="[0, 1, 0, 0]">
        <template v-slot:content>
          <div v-for="item in shoplist" :key="item._id" style="display: flex; padding: 10px">
            <div>
              <!-- {{ shoplist }} -->
              <tm-image :preview="true" :width="130" :height="130" :src="item.skuId.imgUrl"></tm-image>
            </div>
            <div>
              <p>{{ item.skuId.skuName }}</p>
              <p>单价:{{ item.skuId.marketPrice }}</p>
              <p>数量:{{ item.skuNum }}</p>
              <p style="color: red">小计:{{ item.skuId.marketPrice * item.skuNum }}</p>
            </div>
          </div>
          <div v-for="item in carlist" :key="item._id" style="display: flex; padding: 10px">
            <div>
              <tm-image :preview="true" :width="130" :height="130" :src="item.imgUrl"></tm-image>
            </div>
            <div>
              <p>{{ item.skuName }}</p>
              <p>单价:{{ item.cartPrice }}</p>
              <p>数量:{{ item.skuNum }}</p>
              <p style="color: red">小计:￥{{ item.cartPrice * item.skuNum }}</p>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div>商品总额:</div>
            <div>￥{{ cartprice + shoprice }}</div>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div>实际付款:</div>
            <div>￥{{ cartprice + shoprice }}</div>
          </div>
        </template>
      </tm-card>
    </tm-sheet>
    <tm-sheet style="padding: 10px; height: 25vh">
      <tm-card :margin="[0, 1, 0, 0]">
        <template v-slot:content>
          <div>
            <div style="display: flex; justify-content: space-between; align-items: center">
              <div>订单编号:</div>
              <div style="font-size: 15px; display: flex">
                <p>{{ couponId }}</p>
                <a style="color: blue" href="javascript:;">复制</a>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center">
              <div>下单时间:</div>
              <div>{{ Time }}</div>
            </div>
          </div>
        </template>
      </tm-card>
    </tm-sheet>
    <tm-sheet>
      <div style="width: 100%; height: 80px; background-color: white; position: fixed; bottom: 0">
        <tm-Button :width="200" :height="80" color="orange" style="float: right; margin-right: 20px">
          支付订单
        </tm-Button>
      </div>
    </tm-sheet>
  </tm-app>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
import tmCard from '@/tmui/components/tm-card/tm-card.vue'
import { detailapi } from '@/api/module/datail'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import { cartApi } from '@/api/module/order'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
const Name = ref<string>() //姓名
const Tel = ref<number>() //电话
const Address = ref<string>() //地址
const Time = ref<string>('') //时间
const couponId = ref<string>() //订单编号
const cartInfoListlist = ref<any>([])
const carlist = computed(() => cartInfoListlist.value.filter((item: any) => item.isChecked == 1))
const detailget = async (): Promise<void> => {
  const res: any = await detailapi()
  cartInfoListlist.value = res.carInfoVoList[0].cartInfoList
  console.log(res)
  Address.value = res.leaderAddressVo.detailAddress
  Name.value = res.pop.receiverName
  Tel.value = res.pop.receiverPhone
  Time.value = res.pop.ordertime
  couponId.value = res.pop.couponId
}
// 购物车列表

const shop = ref<any>([])
const shoplist = computed(() => {
  //商品表
  return shop.value.filter((item: any) => item.skuId.isChecked == 1)
})
const shopget = async (): Promise<void> => {
  const res = await cartApi()
  shop.value = res
  console.log(res)
}
const cartprice = computed(() => {
  let price: number = 0
  cartInfoListlist.value.forEach((item: any) => {
    if (item.isChecked == 1) {
      price += item.cartPrice * item.skuNum
    }
  })
  return price
})
const shoprice = computed(() => {
  let price: number = 0
  shop.value.forEach((item: any) => {
    if (item.skuId.isChecked === 1) {
      price += item.skuId.marketPrice * item.skuNum
    }
  })

  return price
})
onMounted(() => {
  detailget()
  shopget()
})
</script>

<style lang="scss"></style>
